<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Donation-management</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <style></style>
  </head>

  <body>
    <div class="donation-management">
      <h3 class="title">捐赠管理</h3>
      <!-- 受捐单位 -->
      <div class="recipient">
        <div class="content">
          <span>受捐单位：</span>
          <select class="searchValue">
            <option value="">请选择</option>
            <option>壹基金</option>
            <option>嫣然基金</option>
            <option>自然之友</option>
          </select>
          <button class="search">查询</button>
        </div>
      </div>

      <!-- 捐赠人金额日期等内容 -->
      <div class="donor">
        <div class="content">
          <!-- 第一部分 捐赠人 -->
          <div class="person">
            <span>捐赠人：</span>
            <input type="text" class="getDonor" />
          </div>
          <!-- 第二部分 受捐单位 -->
          <div class="unit">
            <span>受捐单位：</span>
            <select class="getUnit">
              <option data-id="1">壹基金</option>
              <option data-id="2">嫣然基金</option>
              <option data-id="3">自然之友</option>
            </select>
          </div>
          <!-- 第三部分 金额 -->
          <div class="money">
            <span>金额：</span>
            <input type="text" class="getMoney" />
          </div>
          <!-- 第四部分 受捐日期 -->
          <div class="date">
            <span>受捐日期：</span>
            <input
              type="datetime-local"
              class="getDate test1"
              id="test1"
              placeholder="请选择日期"
            />
          </div>
          <!-- 新增按钮 -->
          <button class="add">新增</button>
        </div>
      </div>

      <!-- 表格部分 -->
      <table class="table table-bordered donation-list text-center">
        <!-- 表格头 标题 -->
        <thead>
          <tr class="bg-primary">
            <th>序号</th>
            <th>捐赠人</th>
            <th>受捐单位</th>
            <th>金额</th>
            <th>受捐日期</th>
            <th>操作</th>
          </tr>
        </thead>
        <!-- 表格内容 -->
        <tbody>
          <!-- <tr class="table-content">
            <td>1</td>
            <td>这是姓名</td>
            <td>这是单位</td>
            <td>这是多少钱</td>
            <td>这是捐赠日期</td>
            <td>
              <a href="#" class="del">删</a>
              <a href="#" class="update">改</a>
            </td>
          </tr> -->
        </tbody>
      </table>
    </div>

    <!-- js引入文件 -->
    <script src="./libs/jquery/jquery.min.js"></script>
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
